I have the following code but when I open the file through localhost, I get this message: Cannot GET /[object%20HTMLDivElement]. This is an application for getting location. Here is my HTML code:
<!DOCTYPE html>
<html lang="en">
<head >
<style>
h1{
font-family:cursive;
font-size:32pt;
}
body{
display:flex;
flex-direction:column;
align-items:center;
}
</style>
</head>
<body>
<h1>
GeoLocation Based on Speedometer and Compass
</h1>
<img src="compass.jpg">
<input type="button" id="locationBtn" value="Get My Location" ">
<div id="location">
You will get Location here!!
</div>
<script src="geoLocation.js">
</script>
</body>
</html>
here is my JS code (I have used it in separate js file):
var location=document.getElementById('location');
var button=document.getElementById('locationBtn');
button.addEventListener('click', function showLocation() {
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(showPosition);
}else{
alert('this browser does not support geolocation');
}
});
function showPosition(position){
location.innerHTML="Latitude: " + position.coords.latitude.toString() +
"<br>Longitude: " + position.coords.longitude.toString();
}